<template>
	<view class="layout" :class="{ skelett: isSkelett }">
		<view class="layout-main">
			<view
				class="layout-main-item"
				:key="index"
				v-for="(item, index) in bankList"
				:style="{
					backgroundColor: bankBgColorParams[item.code] || (!isSkelett && 'rgba(93, 107, 212, .8)')
				}"
			>
				<view class="layout-main-item-left">
					<image :src="item.icon" />
				</view>

				<view class="layout-main-item-right">
					<view>{{ item.bankName }}</view>
					<view>储蓄卡</view>
					<view>
						<text>**************</text>
						<text>{{ item.bankCard }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="layout-footer" v-show="isFooter">
			<button hover-class="none" @click="openAddBankCardPage">
				<image :src="addIconUrl" />
				<text>添加银行卡</text>
			</button>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { mapGetters, mapMutations } from 'vuex';
import { getMyBankList, getBankBgColor, getUserInfoVerified } from '@/api/other';

const addIconUrl = Object.freeze(`${defaultImageUrl}icon/icon_tj_tj.png`);

export default {
	data() {
		return {
			addIconUrl,
			bankList: [],

			isCheck: false,
			isSkelett: false,
			bankBgColorParams: {}
		};
	},

	created() {
		this.getPageData();
	},

	onLoad(params) {
		// check 查看权限
		params?.type === 'check' && (this.isCheck = true);
	},

	computed: {
		...mapGetters(['userInfo']),

		isFooter() {
			const { isSkelett, isCheck } = this;

			if (isSkelett || isCheck) {
				return false;
			}

			return true;
		}
	},

	methods: {
		...mapMutations(['changeUserInfo']),

		getPageData() {
			const {
				userInfo: { verifiedStatus, ...otherUserInfoParams }
			} = this;

			// 实名认证状态:0-未认证；1-认证成功；2-认证失败
			const isVerifiedStatus = verifiedStatus !== 1;

			Promise.all([getMyBankList(), getBankBgColor(), isVerifiedStatus && getUserInfoVerified()]).then((res) => {
				const [bankList, bankColorList, verified] = res || [];

				this.isSkelett = false;

				this.bankList = (bankList?.data || []).map((item) => {
					let { icon = '', bankCard, ...otherParams } = item;
					icon = icon || '/bank/bank-other.png';

					const newIcon = icon.startsWith('\/') ? icon.substr(1) : icon;
					const newBankCard = bankCard.slice(-4);

					return {
						...otherParams,
						bankCard: newBankCard,
						icon: `${defaultImageUrl}${newIcon}`
					};
				});

				this.bankBgColorParams = Object.fromEntries(
					(bankColorList?.data || []).map((item) => {
						const { code, bgColor } = item;

						return [code, bgColor];
					})
				);

				verified?.data &&
					this.changeUserInfo({
						...otherUserInfoParams,
						...verified.data
					});
			});
		},

		openAddBankCardPage() {
			uni.navigateTo({
				url: '/otherPage/AddBankCard'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	padding: 0 28rpx;
	@include Db_iosBottomDistance();

	&-main {
		padding-bottom: 28rpx;
		&-item {
			margin-top: 28rpx;
			height: 240rpx;

			display: flex;
			padding-top: 36rpx;
			border-radius: 16rpx;

			&-left {
				width: 120rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-left: 40rpx;
				}
			}

			&-right {
				flex: 1;
				padding-left: 20rpx;

				color: #fff;
				font-size: 32rpx;

				view {
					line-height: 44rpx;

					&:nth-child(2) {
						font-size: 24rpx;
						margin-top: 2rpx;
						line-height: 34rpx;
						color: rgba(255, 255, 255, 0.6);
					}

					&:nth-child(3) {
						font-size: 48rpx;
						margin-top: 26rpx;
						height: 58rpx;
						line-height: 58rpx;
						overflow: hidden;

						text {
							float: left;
							font-weight: bold;

							&:first-child {
								margin: 6rpx 6rpx 0 0;
							}
						}
					}
				}
			}
		}
	}

	&-footer {
		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 4rpx;
		}

		button {
			display: flex;
			align-items: center;
			justify-content: center;

			color: #000;
			font-size: 32rpx;

			height: 160rpx;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.06);

			&::after {
				border: none;
			}
		}
	}

	&.skelett {
		.layout-main-item {
			background: $skelettBgColor;

			&-right {
				view {
					visibility: hidden;
				}
			}
		}
	}
}
</style>
